<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url(https://ts1.tc.mm.bing.net/th/id/R-C.d52313467511573d1fc29be283960d79?rik=V%2bLvBpIyJwRkPQ&riu=http%3a%2f%2fi9.hexun.com%2f2023-05-22%2f208679603.jpg&ehk=JUO5I0u27jX28CFeDOtiSwMCyxIF9LdlPy4JkNYrvTM%3d&risl=&pid=ImgRaw&r=0);
            background-repeat: no-repeat;
            background-size: 100%;
        }

        h1 {
            color: coral;
        }

        h1 span {
            font-size: 20px;
            color: rgb(0, 0, 0);
        }

        .da {
            width: 1000px;
            height: 400px;
            background-color: rgb(137, 237, 54, 0.4);
        }

        .title {
            width: 1000px;
            height: 70px;
            background-color: cornflowerblue;
        }

        .title div {
            width: 498px;
            height: 70px;
            float: left;
            background-color: rgb(41, 180, 55, 0.5);
            border: 1px solid rgb(252, 146, 60);
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            color: cyan;
        }

        .body {
            width: 100%;
            height: 100%;
        }

        .body div {
            display: inline-block;
            width: 340px;
            height: 300px;
        }

        .body div img {
            width: 340px;
            height: 220px;
        }

        .body div span {
            font-size: 18px;
            color: red;
        }

        .body div button {
            background-color: rgba(232, 205, 55, 0.3);
        }
        .qi{
            width: 400px;
            height: 400px;
            background-color: rgb(136, 235, 235);
            position: sticky;
            top: 400px;
            left: 800px;
            display: none;
        }
    </style>
</head>

<body>
    <h1>半天妖烤鱼<span>(荥阳店)</span></h1>
    <div class="da">
        <div class="title">
            <div>烤鱼</div>
            <div>烤肉</div>
        </div>
        <div class="body">

        </div>
    </div>
    <div class="qi">
        <img src="">
        <span></span>
        <span></span>
        <button onclick="gua()">关闭</button>
    </div>
    <script>
        var arr = [
            {
                pid: 0,
                id: 1,
                name: "青花椒烤鱼",
                description: "经典口味，鱼肉鲜嫩，青花椒的麻香四溢",
                price: 128,
                image: "https://tse4-mm.cn.bing.net/th/id/OIP-C.8yPJYw3NiuEhvlAmgyAjRgHaE8?rs=1&pid=ImgDetMain",

            },
            {
                pid: 0,
                id: 2,
                name: "麻辣烤鱼",
                description: "热辣过瘾，适合喜欢吃辣的顾客",
                price: 138,
                image: "https://ts1.tc.mm.bing.net/th/id/R-C.4dca73f6441b94daa683997540370bba?rik=SRdVNSd46aoE5A&riu=http%3a%2f%2fbantianyaoky.18zsb.cn%2fimg%2fabout_us.jpg&ehk=xG3otV2j4l%2f0OCwlOBQD%2bCIJ9WLQDBwCpVmI9T0ZbR4%3d&risl=&pid=ImgRaw&r=0",

            },
            {
                pid: 1,
                id: 3,
                name: "大叉烤肉",
                description: "纯瘦肉腌制后烤制，分量十足",
                price: 68,
                image: "https://bpic.588ku.com/back_list_pic/21/03/01/7c2f5fc257f5a9d6a167d65a891f6549.jpg",
            },
            {
                pid: 1,
                id: 4,
                name: "炙子烤肉",
                description: "焦香酥脆，肉香多汁",
                price: 88,
                image: "https://img95.699pic.com/photo/60049/0699.jpg_wh860.jpg",
            },
        ];
        var div = document.querySelectorAll('.title div')
        var body = document.querySelector('.body')

        div.forEach((item, index) => {
            item.addEventListener('click', () => {
                body.innerHTML = ''
                arr.forEach(i => {
                    if (i.pid == index) {
                        body.innerHTML += `
                <div>
                <img src="${i.image}" onclick="xia(${item.id})">
                <span>￥${i.name}</span>
                <span>￥${i.price}</span>
                <button onclick="add()">添加</button>
            </div>
                `
                    }
                })
            })
        });
        arr.forEach(it => {
                    if (it.pid == 0) {
                        body.innerHTML += `
                <div>
                <img src="${it.image}" onclick="xia(${it.id})">
                <span>￥${it.name}</span>
                <span>￥${it.price}</span>
                <button onclick="add()">添加</button>
            </div>
                `
                    }
                })
            
        var dd = document.querySelector('.qi')
        var ll = document.querySelector('.qi img')
        var kk = document.querySelector('.qi span')
        var nn = document.querySelector('.qi span')
        var iid;
        function xia(i){
            iid = i
            dd.style.display = 'block'
            var op = arr.find(item=>item.id==i)
            ll.src = `${op.img}`
            kk.innerHTML = op.name
            nn.innerHTML = op.description
        }
        function gua(){
            dd.style.display = 'none'
        }
    </script>
</body>

</html>